@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_1467357626_5109937.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1467357626_5109937.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1467357626_5109937.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1467357626_5109937.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1467357626_5109937.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.show-sidebar{
  transform: translateX(290px);
}
.sidebar-box{
  position: fixed;
  transform: translateZ(0);
  height: 100%;
  overflow: auto;
  width: 290px;
  left: -290px;
  z-index: 99;
  top: 0;
  bottom: 0;
  transition: all .3s ease;
  .iconfont {
    font-family:"iconfont";
    font-size: 14px;
    font-style:normal;
    color: #ffffff;
  }
  &.show-sidebar{
    transform: translateX(290px);
  }
  .swiper-slide {
    font-size: 15px;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.sidebar-box{
  .sidebar-header{
    padding: 15px;
    background: #00A2EA;
    .user{
      display: flex;
      flex-direction: row;
      >img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      >p{
        margin-left: 20px;
        line-height: 30px;
        flex: 1;
        font-size: 18px;
        font-weight: 300;
        color: #ffffff;
      }
    }
  }
  .function{
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    color: #ffffff;
    .function-sub{
      padding-left: 52px;
      flex: 1;
      font-size: 13px;
      font-weight: 300;
      position: relative;
      >i{
        position: absolute;
        top: 0;
        left: 20px;
      }
    }
  }
}

.sidebar-list{
  padding-bottom: 20px;
  background: #f9f9f9;
  .sidebar-list-first{
    background: #f9f9f9;
    color: #00A2EA;
    height: 47px;
    line-height: 47px;
    font-size: 15px;
    padding-left: 55px;
    position: relative;
    >i{
      color: #00A2EA;
      font-size: 20px;
      position: absolute;
      top: 0px;
      left: 20px;
    }
  }
  .sidebar-list-li{
    height: 47px;
    line-height: 47px;
    display: flex;
    flex-direction: row;
    padding-left: 15px;
    >p{
      flex: 1;
      font-size: 14px;
      color: #2c3e50;
    }
    >div{
      padding-right: 40px;
      font-size: 25px;
      font-weight: 200;
      color: #868686;
    }
  }
}
